<template>

		<view class="container">
			<!-- #ifdef H5 -->
			<u-navbar bgColor="#0e3a5e" title="工序列表" :autoBack="true" :placeholder="true" leftIconColor="#fff"
				:titleStyle="data.titleStyle">
			</u-navbar>
			<!-- #endif -->
			<u-sticky>
				<!-- #ifdef APP-PLUS -->
				<u-navbar bgColor="#0e3a5e" title="工序列表" :autoBack="true" :placeholder="true" leftIconColor="#fff"
					:titleStyle="data.titleStyle">
				</u-navbar>
				<!-- #endif -->
				<view class="searchBox">
					<u-search :clearabled="true" v-model="data.processName" :animation="true" placeholder="请输入关键字"
						@search="reSearch" @custom="reSearch" @change="reSearch" @clear="reSearch"></u-search>
				</view>
			</u-sticky>
			<view class="pdBox">
				<block v-for="(item,index) in data.list" v-if="data.list.length" :key="index">
					<neo-tree-list-item :paramData="item" layer="0" @tapTitle="tapTitle" :layer="3"></neo-tree-list-item>
				</block>
				<mescroll-empty v-else></mescroll-empty>
			</view>
		</view>
</template>

<script lang="ts" setup>
	import { listTreeByPlanEqmId } from '@/api/planList/planList.js'
	import { reactive, } from "vue";
	import { onShow, onLoad, onUnload } from "@dcloudio/uni-app";

	const data : any = reactive({
		list: [],
		isRefreshList: [],
		loadingText: '加载中',
		planEqmId: null,
		processId: null,
		processName:'',
		titleStyle: {
			color: '#fff',
			fontSize: '34rpx',
			fontWeight: '600'
		},
	});
	
	onLoad((options) => {
		if(options.planEqmId){
			data.planEqmId = options.planEqmId;
		}
		getData()
		// console.log(options.attrs.__pageInstance.options.planEqmId)
		
	});
	
	onShow(() => {
		uni.$on('isRefresh', function (processId) {
			data.processId=processId ||null;
			if(data.processId){
				filterData(data.list)
				isRefreshgetData()
			}
		})
	})
	onUnload(() => {
		uni.$off('isRefresh')
	})
	const reSearch=()=>{
		getData()
	}
	const filterData=(list)=>{
		if(!data.processId){
			return
		}
		const filterList=[...list]
		filterList.map(item=>{
			if(item.id==data.processId ){
				 item.ifComplete="Y";
				 return;
			};
			if(item.children && item.children.length>0){
				filterData(item.children)
			}
		})
	}
	const isRefreshgetData = async () => {
	
		try {
	
			const  params = {
				planEqmId: data.planEqmId
			}
			const res = await listTreeByPlanEqmId(params)
			data.isRefreshList = [...res.data] || [];
			data.list.map(item=>{
				data.isRefreshList.map(i=>{
					if(item.id==i.id){
						item.progress=i.progress
					}
				})
			})
			
		} catch (e) {}
	}
	const getData = async () => {
		try {
	
			let  params = {
				planEqmId: data.planEqmId,
				ifComplete: 'N'		
			}
			if(data.processName){
				params.processName=data.processName
			}
			const res = await listTreeByPlanEqmId(params)
			data.list = [...res.data] || [];
		} catch (e) {
	
			//TODO handle the exception
		}
	}
	//tapTitle
	const tapTitle = (data) => {
		//console.log(data)
		if (!data.id) {
			return
		}
		go(data)
	}
	const go = (data) => {
		uni.navigateTo({
			url: '/pages/processDetails/processDetails',
			success: function(res) {
				
				// #ifndef H5
				uni.$emit('processDetails',data)  
				// #endif
				// #ifdef H5
				setTimeout(() => {
					uni.$emit("processDetails", data);
				}, 500)
				// #endif
			}
		})
	}
</script>

<style lang="scss" scoped>
	.searchBox {
		padding: 30rpx 20rpx;
		background-color: #fff;
		box-shadow: 0 0 10rpx 0 #eeeeee;
	}

</style>